import {Button,Input,Cascader,Rate,Switch ,DatePicker,Calendar,Drawer    } from 'antd'
import React,{useState} from 'react'
import './home.css'
// 引入echars
import * as echarts from 'echarts';
import E from 'wangeditor'


// 基于准备好的dom，初始化echarts实例

export default class extends React.Component{
	componentDidMount(){
		var myChart = echarts.init(document.getElementById('abChar'));
		myChart.setOption({
		  title: {
			
		  },
		  tooltip: {
			trigger: 'axis',
			backgroundColor:'rgba(0,0,0,.5)',
			  textStyle:{
				color:"#fff",
			  },
			  borderColor:'rgba(0,0,0,.5)',
		  },
		  grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		  },
		  xAxis: [
			{
			  splitLine:{
				show:true  
			  },
			  type: 'category',
			  boundaryGap: false,
			  data: ['11-02 2018', '11-03 2018', '11-05 2018','11-03 2018', '11-05 2018', '11-07 2018', '11-08 2018']
			}
		  ],
		  yAxis: [
			{
			  type: 'value'
			},
			{
			  type: 'value'
			}
		  ],
		  series: [
			{
			  name: '订单数量',
			   
			   color:"rgb(94, 225, 198)",
			  type: 'bar',
			  smooth:true,
			  areaStyle: {},
			  emphasis: {
				focus: 'none'
			  },
			  yAxisIndex: 0,  // 配置多个y轴
			  data: [20, 33, 50, 80, 60, 20, 60]
			},
			{
			  name: '订单金额',
			  type: 'bar',
			  color:"rgba(92, 192, 227)",
			  yAxisIndex: 1,  // 配置多个y轴
			  areaStyle: {},
			  smooth:true,
			  emphasis: {
			  				focus: 'none'
			  },
			  data: [2230, 3625, 6423, 8492, 6293, 2293, 6293]
			}
		  ]
		});
		
		const editor = new E('#div1')
		  editor.config.menus = [
		            'bold',
		            'fontSize',
		            'fontName',
		            'italic',
		            'underline',
		            'indent',
		            'lineHeight',
		            'foreColor',
		            'backColor',
		            'link',
		            'list',
		            'todo',
		            'justify',
		            'quote',
		            'emoticon',
		            'image',
		            'video',
		            'table',
		            'code',
		            'splitLine',
		    ]
		editor.create()
		
	}
	render(){
		return <div>
		<div id="div1" style={{width:"1000px",height:"300px"}}/>
		hello home
			<div id="abChar" style={{width:"600px",height:"400px"}}> </div>
			<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"/>
			<img src={require("./bd.png")}/>
		</div>
	}

}